/**
 *Filename: register.scss
 *Author: xhh
 *Description: 注册页，还没有编译的文件，用的是sass语法写
 *Date: 2018.03.23
 */
// 引入统一，清除各浏览器的默认和差异性
@import "reset.scss";
// 引入公用
@import "base.scss";
$bdColor: #d7d7d7;
$inputBoxH: 48px;
$boxMinW: 330px;
/** 背景图 start **/
body {
    width: 100%;
    height: 100%;
    background: url(../img/register/reg_bg.jpg) no-repeat center;
    background-size: cover;
}
/** 背景图 end **/
/** 注册框 start **/
.site-reg-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    width: 52%;
    min-width: $boxMinW+40px;
    margin: 6% auto 0;
    background-color: rgba($color: #fff, $alpha: .8);
    // 错误信息提示
    .reg-error-tip {
        z-index: 10;
        display: none;
        position: absolute;
        bottom: 27%;
        left: 50%;
        padding: .8rem 2.2rem;
        font-size: .875rem;
        text-align: center;
        color: #f10;
        transform: translate(-50%,0);
    }
    .reg-header {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 96%;
        line-height: 2.6;
        a {
            color: #000;
            padding-left: 1.6rem;
            border-left: 1px solid $bdColor;
            &:hover {
                font-weight: bold;
            }
        }
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            right: -2%;
            width: 95%;
            border-bottom: 1px solid $bdColor;
        }
    }
    // 注册表单部分
    .reg-body {
        width: 52%;
        min-width: $boxMinW;
        .reg-form-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .checkbox-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: $boxMinW;
            margin-top: 1.8rem;
            label {
                padding-left: .6rem;
                font-size: .75rem;
                color: #222;
                cursor: pointer;
            }
        }
        .input-box {
            display: flex;
            align-items: center;
            width: $boxMinW;
            border: 1px solid $bdColor;
            margin-top: 1.2rem;
            height: $inputBoxH;
            label {
                display: inline-block;
                width: $inputBoxH;
                height: $inputBoxH;
                border-right: 1px solid $bdColor;
                background-image: url(../img/register/icon_reg.png);
                background-color: #f2f0f0;
                background-repeat: no-repeat;
            }
            label[for="mobile"] {
                background-position: 0 0;
            }
            label[for="verify_code"] {
                background-position: 0 -48px;
            }
            label[for="email"] {
                background-position: 0 -96px;
            }
            label[for="password"] {
                background-position: 0 -144px;
            }
            label[for="confirm_pwd"] {
                background-position: 0 -192px;
            }
            label[for="username"] {
                background-position: 0 -240px;
            }
            input {
                height: $inputBoxH;
                width: 87%;
                border: 0 none;
                outline: none;
                text-indent: 10px;
                background-color: transparent;
            }
        }
        ::-webkit-input-placeholder {
            color: #999;
        }
        // 注册按钮
        .reg-btn-box {
            width: 100%;
            min-width: $boxMinW;
            border-top: 1px solid $bdColor;
            margin-top: 2rem;
            .reg-btn {
                width: 100%;
                height: 46px;
                border: 0 none;
                margin-top: .8rem;
                line-height: 46px;
                cursor: pointer;
                color: #fff;
                transition: all .5s linear;
                background-color: #000;
            }
            .reg-btn[disabled="disabled"] {
                background-color: rgba(0, 0, 0, .5);
            }
        }
    }
    .reg-footer {
        margin: 1.4rem 0 2.5rem;
        label {
            font-size: .875rem;
            color: #222;
        }
        a {
            color: #000;
            text-decoration:underline;
            &:hover {
                font-weight: bold;
            }
        }
    }
}
/** 注册框 end **/
/** 公司名称 start **/
.company-name {
    margin: 1.4rem 0;
    text-align: center;
    font-size: .875rem;
    color: #666;
}
/** 公司名称 end **/